<!DOCTYPE html>
<html>
<head>
    <title>Surface Current Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    /**
     * Helper function to add an arrow to the current path.
     * @param {CanvasRenderingContext2D} ctx - The rendering context.
     * @param {number} fromx - The starting x-coordinate.
     * @param {number} fromy - The starting y-coordinate.
     * @param {number} tox - The ending x-coordinate.
     * @param {number} toy - The ending y-coordinate.
     * @param {number} [headlen=10] - The length of the arrowhead lines.
     */
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Main Drawing ---

    // 1. Draw the plane (parallelogram)
    ctx.fillStyle = '#D3D3D3'; // lightgray
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(370, 190);
    ctx.lineTo(130, 190);
    ctx.lineTo(60, 310);
    ctx.lineTo(300, 310);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // 2. Draw the axes
    ctx.beginPath();
    ctx.lineWidth = 2;
    // Y-axis (horizontal)
    drawArrow(ctx, 50, 250, 450, 250);
    // Z-axis (vertical)
    drawArrow(ctx, 250, 400, 250, 50);
    // X-axis (diagonal, parallel to plane sides)
    drawArrow(ctx, 330, 113, 180, 370);
    ctx.stroke();

    // 3. Draw the other diagonal line
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.moveTo(100, 170);
    ctx.lineTo(400, 330);
    ctx.stroke();

    // 4. Draw the vector K(t)
    ctx.beginPath();
    ctx.lineWidth = 2;
    drawArrow(ctx, 170, 230, 280, 245, 12);
    ctx.stroke();

    // 5. Draw labels
    ctx.fillStyle = 'black';
    ctx.font = '20px serif';
    ctx.fillText('z', 255, 55);
    ctx.fillText('y', 455, 255);
    ctx.fillText('x', 170, 385);

    // Label for K(t)
    ctx.font = 'italic 22px serif';
    const k_label_x = 175;
    const k_label_y = 220;
    const k_char = 'K';
    const t_part = '(t)';
    
    // Draw K(t) text
    ctx.fillText(k_char + t_part, k_label_x, k_label_y);

    // Draw vector arrow over K
    const k_char_metrics = ctx.measureText(k_char);
    const k_char_width = k_char_metrics.width;
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    const arrow_y = k_label_y - 22;
    drawArrow(ctx, k_label_x, arrow_y, k_label_x + k_char_width, arrow_y, 5);
    ctx.stroke();

</script>
</body>
</html>